<template>
  <div>
    <MyNav></MyNav>
    <div style="border-bottom: 1px solid rgba(199,187,237,.5);"></div>
    <div class="hh">
      <div class="w">
        <!-- 左边图片     -->
        <div class="left">
          <div class="bck"></div>
          <div class="top-left-border"></div>

          <div class="demo-image__preview bigImg">
            <el-image :src="goodimg" :preview-src-list="srcList"></el-image>
          </div>

          <div class="smallImg">
            <p>
              <img
                :src='goodimg'
                alt=""
              />
            </p>
            <span></span>
          </div>
        </div>

        <!-- 右边 -->
        <div class="right">
          <div class="v-info">
            <i></i>
            <span>该作品拥有iBox官方认证</span>
          </div>

          <div class="p-name">{{goodname}}</div>

          <div class="group">
            <span>编号：#{{num1}}/{{num2}}</span>
            <a href="JavaScript:void(0)" @click="$router.push('/list')"
              >选择其它编号 <i></i
            ></a>
          </div>

          <div class="num">
            <div class="num-main">
              <span class="titel">发行</span>
              <span>{{num3}}</span>
            </div>
            <div class="num-main">
              <span class="titel">流通</span>
              <span>{{num4}}</span>
            </div>
          </div>

          <!-- 合约地址 -->
          <div class="chain-info">
            <div class="chain-item">
              <span>合约地址</span>
              <i>{{num5}}</i>
            </div>
            <div class="chain-item">
              <span>链上标识</span>
              <i>{{num6}}</i>
            </div>
          </div>

          <div class="price">
            <span>{{price}}</span>
          </div>

          <div :class="selled != 'selling' ? 'selled' : 'buy'" @click="Add()">
            <span class="sell" v-if="selled === 'selling'">购买藏品</span>
            <span class="sell" style="color: #333" v-else>已售出</span>
            <!-- <el-button type="primary" round class="buy">登录</el-button> -->

            <i></i>
          </div>

          <!-- 全球限量发行 -->
          <div class="tip">
            <!-- <span>全球限量发售906份</span> -->
          </div>

          <div class="hr"></div>

          <!-- 创作者 -->
          <div class="user-create">
            <p></p>
            <div class="one">
              <i>创作者</i>
              <div>iBOX/<a href="javascript:;">{{gooduser}}</a></div>
            </div>
            <span>TA的主页</span>
          </div>
          <!-- 拥有者 -->
          <div class="user-create" style="margin-top: 20px;" v-if="selled != 'selling'">
            <p></p>
            <div class="one">
              <i>拥有者</i>
              <div>{{ selled }}</div>
            </div>
            <span>TA的主页</span>
          </div>
        </div>
      </div>

      <!-- 作品描述 -->
      <div class="title">
        <div class="center">
          <i>作品描述</i>
          <p>
            主场一片欢腾，球迷们抛洒着庆祝的礼花，红色礼花漫天飞舞，现场完全成了一片欢乐海洋。球员们将进球功臣高高抛起，以示对他的崇拜和感激之情。
          </p>
        </div>
      </div>

      <!-- 品牌描述 -->
      <div class="title">
        <div class="center">
          <i>品牌描述</i>
          <p>头部数组藏品电商平台</p>
          <a href="">查看更多内容</a>
        </div>
      </div>

      <!-- 关于数组藏品 -->
      <div class="title">
        <div class="center">
          <i>关于数字藏品</i>
          <p>
            数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
          </p>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="list">
        <div class="center">
          <div class="main" @click="$router.push('/list')">
            商品列表
            <i></i>
          </div>
        </div>
      </div>

      <!-- {{goodList[0]}} -->
    </div>
    <My-foot></My-foot>
  </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import MyNav from "../components/MyNav.vue";
import link from "../api/request";
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import MyFoot from '../components/MyFoot.vue'
import { useStore } from "vuex";
import ElementPlus, { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
const store = useStore();

//获取传递的id
const router = useRouter();
const route = useRoute();




//商品图片

const srcList = ref<any>([]);

//商品名称
const goodname=ref('')

//商品图片
const goodimg=ref([''])

//随机数
 const getRandom=(a:any,b:any)=>{
    return Math.floor(Math.random()*Math.abs(a-b)+Math.min(a,b))
  }

//商品价格
const price = ref()

// 售出状态
const selled = ref<string>('')

//编号
const num1=getRandom(1000,9999)
const num2=getRandom(1001,9999)
const num3=getRandom(100,1000)
const num4=getRandom(1000,9999)
const num5=getRandom(10000,99999)
const num6=getRandom(10000,99999)
const num7=getRandom(0,199)

//创作者
const goodList=["宇文佩佩","木鸢","大鱼花灯","琵琶","半臂衫","竹筏","龙头手弩","春秋老","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至","小寒","大寒","春节","元宵","社日","上巳","寒食","清明","端午","七夕","中元","中秋","重阳","下元","冬至","除夕","花朝","卜芥","儿茶","八角","丁香","三七","三棱","干姜","山奈","山姜","山药","山楂","川乌","川芎","天冬","元胡","元参","木香","木通","木贼","丹皮","丹参","乌韭","乌药","乌桕","乌梅","玉竹","甘松","甘草","甘遂","艾叶","石斛","龙齿","龙骨","龙葵","仙茅","白芨","白术","白芍","白芷","白矾","白果","白前","白薇","玄参","半夏","地榆","芒硝","朴硝","百合","百部","当归","竹叶","竹沥","竹茹","血竭","冰片","防己","防风","麦冬","麦芽","赤芍","芫花","苍术","芡实","芦荟","芦根","苏子","苏木","苏叶","杏仁","杜仲","岗梅","佛手","羌活","远志","连翘","沙参","沉香","诃子","附子","青皮","青蒿","青黛","苦参","郁金","虎杖","虎骨","知母","佩兰","泽兰","泽泻","降香","细辛","玳瑁","珍珠","荆芥","茜草","筚拨","草乌","草果","茵陈","茯苓","枯矾","枳壳","枳实","栀子","杞子","柿蒂","厚朴","砂仁","轻粉","虻虫","钩藤","香附","香薷","重楼","胆木","胆矾","独活","前胡","首乌","神曲","秦艽","秦皮","莲子","莲房","莲须","莪术","荷叶","桂枝","桔梗","桃仁","盐蛇","柴胡","党参","浮萍","通草","桑叶","桑枝","黄芩","黄芪","黄连","黄柏","黄藤","菖蒲","雪胆","常山","商陆","续断","琥珀","斑蟊","紫草","紫菀","贯众","蒺藜","蒲黄","椿皮","槐米","槐花","槐角","蜀椒","榧子","槟榔","磁石","辣蓼","赭石","蕤仁","薤白","薯莨","薄荷","橘红","橘核","紫苏","檀香","蒿本","爵床","藕节","礞石","瞿麦","藿香","蟾酥","麝香","丁公藤","九里明","茯苓","小茴","天南星","木蝴蝶","月季","乌梢蛇","凤尾草","六月雪","石决"]
const gooduser=goodList[num7]





// 发出请求
onMounted(async () => {

    let id=route.params.id ? route.params.id :'6386ce1cecf71b7480f2d893'   
    // let img_id=route.params.id ? route.params.id :'6386cdfbecf71b7480f2d822'
    //获取商品信息
  link('/shops/api/detail/'+id, "GET").then((ok:any) =>{
                
        goodname.value=ok.data.data.data.shopName
        price.value=ok.data.data.data.shopPrice
        goodimg.value = ok.data.data.data.shopImg
        selled.value = ok.data.data.data.selled
        srcList.value.push(ok.data.data.data.shopImg)
        })

// 商品图片
// link('/imgs/api/imgSrc/'+img_id, "GET").then((ok:any) =>{
//        goodimg.value=ok.data.data[0].src    
//         srcList.value.push(ok.data.data[0].src)
//         srcList.value.splice(0,1)    
//         console.log(ok);            
//         })



});
const Add = async () => {
  console.log('1111')
  
  if (!store.state._token) {
    ElMessage.error("请先登录");
    router.push("/account");
    return;
  } else {
    if(selled.value != 'selling') return
    let data = {
      shopId: route.params.id,
      userId: store.state.userId,
      userName: store.state.Name,
      shopNum: 1,
    };
    let res: any = await link("/loves/api/add", "POST", data).then(
      (ok: any) => {
        console.log(ok);
        if (ok.data.Code === 0) {
          ElMessage({
            message: "购买成功",
            duration: 1500,
            type: 'success',
            onClose: () => {
              router.push('/account')
            }
          });
        } else {
          ElMessage.error("购买失败,请刷新重试");
        }
      }
    );
  }
};







</script>

<style lang='scss' scoped>
.hh {
  height: 100%;
  width: 100%;
  background-color: #f8fbff;
}
.center {
  width: 1200px;
  margin: 0 auto;
}
.w {
  width: 1200px;
  height: 980px;
  margin: 0 auto;
  // border: 1px solid black;
  padding: 80px 0;
  display: flex;
}

.left {
  position: relative;
  flex: 1;
}

//背景
.bck {
  width: 142px;
  height: 142px;
  background: url("https://www.ibox.art/zh-cn/static/img/c636106.v1669448689012.svg")
    50% no-repeat;
  position: absolute;
  top: -30px;
  right: -60px;
}

.top-left-border {
  border-left: 4px solid #ff56a7;
  border-top: 4px solid #ff56a7;
  width: 50px;
  height: 30px;
  position: absolute;
  top: -6px;
  left: -6px;
}

.bigImg {
  width: 600px;
  height: 877px;
  // border: 1px solid rgb(9, 5, 5);
  min-height: 420px;
  position: relative;
  z-index: 110;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.bigImg img {
  width: 100%;
  height: auto;
}

.smallImg {
  width: 80px;
  height: 100px;
  margin: 30px 15px;
  cursor: pointer;
  // border: 1px solid black;
}

.smallImg p {
  width: 80px;
  height: 56px;
  margin-bottom: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  // border: 1px solid black;
}

.smallImg span {
  display: block;
  height: 4px;
  width: 80px;
  background: #ff56a7;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.smallImg p img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border: none;
}

//右边
.right {
  margin-left: 78px;
  height: 100%;
  // border: 1px solid black;
  flex: 1;
}

.v-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
  height: 20px;
  // border: 1px solid black;
}

.v-info i {
  display: block;
  width: 16px;
  height: 16px;
  background: url("https://www.ibox.art/zh-cn/static/img/04e21d6.v1669810212431.svg")
    50% no-repeat;
}

.v-info span {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  color: #2c2c34;
}

.p-name {
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  color: #2c2c34;
  margin-bottom: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.group {
  font-size: 14px;
  line-height: 20px;
  color: rgba(44, 44, 52, 0.5);
}

.group a {
  color: #ff56a7;
  display: inline-block;
  margin-left: 10px;
}

.group a i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("https://www.ibox.art/zh-cn/static/img/d61e7f5.v1669810212431.svg")
    50% no-repeat;
  vertical-align: middle;
  margin-left: -5px;
}

.num {
  margin-top: 15px;
  height: 22px;
  font-weight: 400;
  font-size: 24px;
  line-height: 22px;
  color: #abaab9;
}

.num-main {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  height: 20px;
  color: #696873;
  padding-right: 8px;
  background: #f5f5f7;
  margin-right: 40px;
  margin-bottom: 13px;
}

.num-main .titel {
  display: inline-block;
  color: #fff;
  height: 100%;
  background: #abaab9;
  padding: 0 6px;
  margin-right: 5px;
}

.chain-info {
  margin-top: 34px;
  padding: 16px;
  background: #fefefe;
  -webkit-box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -moz-box-shadow: 0 10px 24px rgba(1, 0, 95, 0.1);
  box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.chain-item {
  margin-bottom: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.chain-item span {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #2c2c34;
  padding-right: 16px;
  min-width: 80px;
}

.chain-item i {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  line-height: 16px;
  color: #0066ed;
  font-style: normal;
}

.buy {
  background-color: #0066ed;
  //  margin-top: 34px;
  padding: 16px;
  -webkit-box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -moz-box-shadow: 0 10px 24px rgba(1, 0, 95, 0.1);
  box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}

.selled {
  background-color: rgb(231,231,231);
  //  margin-top: 34px;
  padding: 16px;
  -webkit-box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -moz-box-shadow: 0 10px 24px rgba(1, 0, 95, 0.1);
  box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  cursor: not-allowed;
}

.sell {
  font-size: 20px;
  line-height: 28px;
  color: white;
  text-align: left;
}

.price {
  font-family: dinproregular;
  font-size: 40px;
  line-height: 47px;
  color: #2c2c34;
  padding: 32px 0 0;
}
.buy{
  cursor: pointer;
}
.buy i {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("https://www.ibox.art/zh-cn/static/img/c8504ab.v1669448689012.svg")
    50% no-repeat;
  position: absolute;
  right: 30px;
}

.tip {
  margin-top: 8px;
  display: flex;
  justify-content: right;
}

.tip span {
  font-size: 14px;
  line-height: 20px;
  color: rgba(20, 24, 31, 0.6);
}

.hr {
  margin: 24px 0;
  height: 1px;
  background: #2c2c34;
  opacity: 0.1;
}

.user-create {
  display: flex;
  align-content: center;
  position: relative;
}

.user-create p {
  border: 1px solid black;
  width: 44px;
  height: 44px;
  background: url("https://static.ibox.art/file/oss/test/image/nft-goods/72b16a1628984f63a1437eddeacb5a88.png")
    50% no-repeat;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  border-radius: 22px;
  overflow: hidden;
  display: inline-block;
}

.user-create .one {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 347px;
  margin-left: 20px;
}

.user-create i {
  font-size: 14px;
  line-height: 20px;
  color: rgba(20, 24, 31, 0.6);
  opacity: 0.8;
  margin-bottom: 5px;
}

.user-create a {
  font-family: dinproregular;
  font-size: 16px;
  line-height: 19px;
  color: #006eff;
}

.user-create span {
  // border: 1px solid black;
  align-content: center;
  color: #005dff;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.title {
  margin-bottom: 60px;
}

//作品描述
.title i {
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  color: #2c2c34;
  margin-bottom: 16px;
  font-style: normal;
}

.title p {
  font-size: 14px;
  line-height: 20px;
  color: rgba(44, 44, 52, 0.5);
  word-break: break-all;
}

.title a {
  font-size: 14px;
  line-height: 20px;
  color: #0066ed;
}

a {
  text-decoration: none;
}

.list .center .main {
  display: inline-flex;
  width: -webkit-calc(50% - 20px);
  width: -moz-calc(50% - 20px);
  width: calc(50% - 20px);
  height: 95px;
  background: #fff;
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  border: 1px solid #e7ecf1;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0 30px;
  cursor: pointer;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.list .center .main i {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("https://www.ibox.art/zh-cn/static/img/c1e1561.v1669448689012.svg")
    no-repeat;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

.foot{
  background-color: white;
}

.list{
  margin-bottom: 80px;
}



</style>